<template>

  <div  id="Payment">
    <div style="text-align: center" >
      <span style="color: red">温馨提示：如未刷新出订单详情,请点击右边按钮</span>
      <el-button type="primary" size="mini" @click="selectOrderDetails()">刷新</el-button>
    </div>
    <h3>支付页面</h3>

    <div style="margin-left: 100px; margin-right: 100px"  >
      <div style=" margin-top: 20px;">
        <div style="text-align: left;float: left " class="div1">
          <span>共 {{Total}}笔订单</span>
        </div>
        <div style="text-align: right;float: right" class="div1">
          <span>总计: <span style="color: orange;font-size: 20px">{{totalPrice}}</span>元</span>
        </div>

      </div>
      <el-table :data="TBorderDetails">
        <el-table-column label="商品图片">
          <template #default="row">
            <img :src="row.row.image" alt=""
                 style="width: 50px; height: 50px">
          </template>
        </el-table-column>
        <el-table-column prop="commodityName" label="商品名称">
        </el-table-column>
        <el-table-column label="单价">
          <template #default="row">
            {{row.row.price.toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column label="数量" prop="count"></el-table-column>
        <el-table-column label="小计" >
          <template #default="row">
            {{(row.row.price * row.row.count).toFixed(2)}}
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div style="margin-left: 100px; margin-right: 100px"  >

      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246);margin-top: 40px">
          <el-menu
              :router="true"
              default-active="2"
              class="el-menu-vertical-demo"
          >
              <el-menu-item  index="Payment1" >支付宝支付</el-menu-item>
              <el-menu-item  index="Payment2" >微信支付</el-menu-item>
              <el-menu-item  v-show="disabled1" index="Payment3">账号余额支付</el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>

    </div>

  </div>
</template>
<script>
export  default {
  //商品id
  props:["id"],
  name:"Payment",
  data(){
    return{
      disabled1:true,
      // 待支付页面的表
      TBorderDetails:[
          {
            subtotal: 0,
            count: 0,
            commodityName: "",
            image: "",
            price: 0,
          }
      ],
      //购物车项
      tableData:[],
      // 订单总金额
      totalPrice: null,
      //计算订单件数
      Total:null,
      //订单表单
      order:{},
      //账号id
      uid:this.$root.uid,
    }
  },
  methods:{
    //查询账号密码
    select(){
      this.$axios.get(`/zhuche/One/${this.uid}`).then(r=>{
        console.log("this.user",r.data)
      if(r.data.isBusinesses===1){
        this.disabled1=true
      }else if(r.data.isVendor===1){
        this.disabled1=true
      }else {
        this.disabled1=false
      }
      })
    },
    selectOrderDetails(){
      //查询供应商单个订单下的详情
      this.$axios.post(`DeskOrder/One/${this.order.id}`).then((r =>{
        this.TBorderDetails=r.data;
        console.log("商户单个订单的详情TBorderDetails",this.TBorderDetails)
       if(this.TBorderDetails!=null){
         // 计算订单总金额(用订单详情的计算)
         this.totalPrice=this.TBorderDetails.reduce((total,orderDetails)=>{
           return total+orderDetails.subtotal
         },0)
         this.$root.orderTotal=this.totalPrice
       }
      }))

        console.log("判断未空",this.TBorderDetails[0].subtotal)



       this.Total=this.TBorderDetails.length
      this.select()
    },
  },
  created() {

    // 从路由对象中取出参数
    this.tableData=this.$route.params.cartList
    this.order=this.$route.params.order

    //设置全局变量（选中的购物车项）
    this.$root.shoppingCarts=this.tableData
    this.$root.order=this.order



  },
  mounted(){
    this.selectOrderDetails()
  }
}
</script>
<style scoped>
.div1{
  display:inline-block;
}

</style>